<template>
  <div class="me">
    <cube-scroll>
      <me-login-register :loginBg='loginBg' :avatarImg='avatarImg'></me-login-register>
      <me-my-order :orderIcons='orderIcons'></me-my-order>
      <ui-line></ui-line>
      <me-menu :menus='menus1'></me-menu>
      <ui-line></ui-line>
      <me-menu :menus='menus2'></me-menu>
      <ui-line></ui-line>
      <me-menu :menus='menus3'></me-menu>
      <ui-line></ui-line>
      <me-menu :menus='menus4'></me-menu>
      <ui-line></ui-line>
    </cube-scroll>
  </div>
</template>
<script>
import TitleBar from 'common/navibar/TitleBar'
import MeLoginRegister from './components/LoginRegister'
import MeMyOrder from './components/MyOrder'
import UiLine from './components/UiLine'
import MeMenu from './components/Menu'
import BottomNaviBar from 'common/navibar/BottomNaviBar'
import {mapMutations} from 'vuex'

export default {
  name: 'Me',
  data () {
    return {
      title: '我的',
      showTitleBar: false,
      showBottomNavi: true,
      loginBg: '/img/me@loginBg.png',
      avatarImg: '/img/me@avatar.png',
      menus1: [{
        id: 0,
        img: '',
        text: '会员中心',
        url: ''
      }, {
        id: 1,
        img: '',
        text: '我的优惠',
        url: ''
      }],
      menus2: [{
        id: 0,
        img: '',
        text: '服务中心',
        url: ''
      }, {
        id: 1,
        img: '',
        text: '小米之家',
        url: ''
      }],
      menus3: [{
        id: 0,
        img: '',
        text: 'F码通道',
        url: ''
      }],
      menus4: [{
        id: 0,
        img: '/img/me@setting.png',
        text: '设置',
        url: ''
      }],
      orderIcons: [{
        id: 0,
        img: '',
        text: '待付款'
      }, {
        id: 1,
        img: '',
        text: '待收货'
      }, {
        id: 2,
        img: '/img/me@fix.png',
        text: '退换修'
      }]
    }
  },
  components: {
    TitleBar,
    BottomNaviBar,
    MeLoginRegister,
    MeMyOrder,
    UiLine,
    MeMenu
  },
  methods: {
    ...mapMutations([
      'changeShowTitleBar',
      'changeShowBottomNaviBar',
      'changeSelectedBottomNav'
    ]),
    changeShowHeaderFooter () {
      this.changeShowTitleBar(false)
      this.changeShowBottomNaviBar(true)
      this.changeSelectedBottomNav('我的')
    }
  },
  mounted () {
    this.changeShowHeaderFooter()
  },
  activated () {
    this.changeShowHeaderFooter()
  }
}
</script>
<style lang='stylus' scoped>
.me
  background: #f5f5f5
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 1rem
</style>
